<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template #center> 购物街 </template>
    </nav-bar>
    <my-content>
      <my-swiper :banner="banner"></my-swiper>
      <recommend-view :recommend="recommend"></recommend-view>
      <category-list></category-list>
      <tab-control :tabControl="tabControl" @tabClick="tabClick"></tab-control>
      <good-list :tabIndex="tabIndex"></good-list>
    </my-content>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import { getHomeMultidata, getHomeGoods } from "@/network/home.js";
import MySwiper from "@/components/content/swiper/Swiper.vue";
import RecommendView from "@/components/content/recommend/RecommendView.vue";
import CategoryList from "@/components/content/category/CategoryList.vue";
import TabControl from "@/components/content/tabControl/TabControl.vue";
import GoodList from "@/components/content/goods/GoodList.vue";
import MyContent from "@/components/common/content/Content.vue";

export default {
  name: "Home",
  data() {
    return {
      bs: null,
      banner: [],
      recommend: [],
      tabControl: ["流行", "新款", "精选"],
      tabIndex: 0,
    };
  },
  components: {
    NavBar,
    MySwiper,
    RecommendView,
    CategoryList,
    TabControl,
    GoodList,
    MyContent,
  },
  methods: {
    //切换tab
    tabClick(index) {
      this.tabIndex = index;
    },
  },
  created() {
    getHomeMultidata("banner").then((res) => {
      this.banner = res;
    });
    getHomeMultidata("recommend").then((res) => {
      this.recommend = res;
    });
  },
};
</script>

<style scoped>
#home {
  overflow: hidden;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
</style>
